<template>
  <div>
    <el-row>
      <el-card class="cool-card">
        <div slot="header">
          <div class="el-card-tool_header">
            <span>角色列表</span>
            <el-button class="card-header-icon-action"
                       size="small"
                       circle
                       icon="el-icon-plus"
                       @click="addRoleDialogVisible = true">
            </el-button>
          </div>
        </div>
        <el-table v-loading="loadingTable"
                  :data="roles"
                  size="small"
                  ref="rolesTable"
                  row-key="id"
                  class="actions-table">
          <el-table-column align="center" label="ID" prop="id"/>
          <el-table-column align="center" label="角色名称" prop="name">
            <template slot-scope="scope">
              <el-tag type="danger" effect="plain">{{scope.row.name}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="角色代码" prop="code"/>
          <el-table-column align="center" label="角色描述" prop="memo"/>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <!--<el-button-group>-->
                <el-button
                  size="mini"
                  type="info"
                  @click="onShowUpdateRoleDialog(scope.row)"
                >编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="onDeleteRole(scope.row)"
                >删除
                </el-button>
                <el-button
                  size="mini"
                  type="success"
                  @click="$router.push('/authorization/grant?role_id='+scope.row.id+'&name='+scope.row.name)"
                >赋权
                </el-button>
              <!--</el-button-group>-->

            </template>
          </el-table-column>
        </el-table>
      </el-card>

    </el-row>
    <el-row>
      <el-pagination
        class="page-section"
        background
        hide-on-single-page
        @current-change="onPaging"
        layout="prev, pager, next"
        :total="pagingParams.total"/>
    </el-row>

    <!--编辑模态框-->
    <el-dialog :visible.sync="updateRoleDialogVisible"
               title="编辑角色" :width="$store.getters.inMobile == true ? '100%' : '50%'">
      <div class="dialog-body">
        <el-form ref="updateRow" :model="updateRoleModel" label-width="100px" label-position="left">
          <el-form-item label="ID">
            <el-input v-model="updateRoleModel.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="角色名称">
            <el-input v-model="updateRoleModel.name"></el-input>
          </el-form-item>
          <el-form-item label="角色代码">
            <el-input v-model="updateRoleModel.code"></el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input type="textarea" :rows="3" v-model="updateRoleModel.memo"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onUpdateRole" :loading="onUpdateRoleLoading">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加角色模态框-->
    <el-dialog :visible.sync="addRoleDialogVisible"
               title="新增角色"
               :width="$store.getters.inMobile == true ? '100%' : '50%'">
      <div class="dialog-body">
        <el-form ref="addRow" :model="addRoleModel" label-width="100px" label-position="left">
          <el-form-item label="角色名称:">
            <el-input v-model="addRoleModel.name"></el-input>
          </el-form-item>
          <el-form-item label="角色代码:">
            <el-input v-model="addRoleModel.code" placeHolder="角色代码以ROLE_开头"></el-input>
          </el-form-item>
          <el-form-item label="角色描述:">
            <el-input v-model="addRoleModel.memo" type="textarea" :rows="3"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="addRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddRole" :loading="onAddRoleLoading">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {addRole, deleteRoleById, getAllRolesWithPage, updateRole} from "../../api/roles-api";

  export default {
    name: "Roles",
    data() {
      return {
        roles: [],
        loadingTable: false,
        pagingParams: {
          current: 1,
          size: 15,
          total: 0,//总数量
          pages: 0,//总页数
        },
        updateRoleDialogVisible: false,
        onUpdateRoleLoading: false,
        updateRoleModel: {},
        addRoleDialogVisible: false,
        addRoleModel: {
          name: '',
          code: 'ROLE_',
          memo: ''
        },
        onAddRoleLoading: false,

      }
    },
    methods: {
      onAddRole() {
        this.onAddRoleLoading = true
        addRole(this.addRoleModel).then(res => {
          this.addRoleDialogVisible = false
          this.onAddRoleLoading = false
          this.$message.success("添加成功")
          this.loadAllRoles()
        }).catch(() => {
          this.onAddRoleLoading = false
        })
      },
      onUpdateRole() {
        this.onUpdateRoleLoading = true
        updateRole(this.updateRoleModel).then(res => {
          this.onUpdateRoleLoading = false
          this.updateRoleDialogVisible = false
          this.$message.success("更新成功")
          this.loadAllRoles()
        }).catch(() => {
          this.onUpdateRoleLoading = false
          this.updateRoleDialogVisible = false
        })
      },
      onDeleteRole(row) {
        this.$confirm('确定要删除该角色吗？与该角色关联的权限将会一并删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$loading()
          deleteRoleById(row.id).then(res => {
            this.$message.success("删除成功")
            this.loadAllRoles()
            this.$loading().close()
          }).catch(() => {
            this.$loading().close()
          })
        })
      },
      onShowUpdateRoleDialog(row) {
        this.updateRoleModel = row
        this.updateRoleDialogVisible = true
      },
      onPaging(currentPage) {
        this.pagingParams.current = currentPage
        this.loadActionsWithPage()
      },
      loadAllRoles() {
        this.loadingTable = true
        getAllRolesWithPage(this.pagingParams).then(res => {
          console.log(res)
          this.roles = res.records
          this.pagingParams.current = res.current
          this.pagingParams.pages = res.pages
          this.pagingParams.total = res.total
          this.loadingTable = false
        })
      }
    },
    created() {
      this.loadAllRoles();
    }
  }
</script>

<style scoped>
  .page-section {
    margin-top: 10px;
    float: right;
  }

  .dialog-body {
    /*margin: 10px;*/
  }
</style>
